<template>
  <div class="main">
    <div class="upload-banner">
      <div class="w1300">
        <div class="flex-yc">
          <b>轮播图</b>
          <p>图片尺寸为1200*400，不超过2MB</p>
        </div>
        <el-upload
          class="avatar-uploader"
          action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <el-image v-if="logoUrl" class="logo" src="" fit="contain"></el-image>
          <div class="upload-wrap flex-xyc" v-else>
            <el-icon class="avatar-uploader-icon"><Plus /></el-icon>
          </div>
        </el-upload>
      </div>
    </div>
    <div class="w1300 jianjie">
      <h2>课题组简介</h2>
      <editor-input v-model:value="formData.jianjie"></editor-input>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reqGetHomeData } from '@/pages/topic/api/api.ts'

import { onMounted, ref } from 'vue'
import { useCommon } from '@/pages/topic/composables/common.ts'
import EditorInput from '@/components/control/editor/index.vue'

const { setThemBgc } = useCommon()
onMounted(() => {
  getHomeData()
  setThemBgc('#B80450')
})

const getHomeData = async () => {
  await reqGetHomeData(1)
}

const formData = ref({
  jianjie: '',
})
</script>

<style scoped lang="scss">
.main {
  background-color: #f8f8f8;
}
.upload-banner {
  height: 400px;
  background-color: #eee;
  display: flex;
  align-items: flex-end;
  padding-bottom: 20px;
  .flex-yc {
    margin-bottom: 10px;
    b {
      font-size: 14px;
      color: #333;
      font-weight: bold;
    }
    p {
      font-size: 12px;
      color: #9a9a9a;
      margin-left: 10px;
    }
  }
  .upload-wrap {
    width: 98px;
    height: 98px;
    background-color: #fff;
  }
}

.jianjie {
  padding-bottom: 50px;
  h2 {
    padding: 34px 0 37px;
    font-size: 22px;
    color: #333;
    font-weight: bold;
  }
}
</style>
